<template>
  <z-modal
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
         <a-row>
          <a-col :span="8" >
            <a-form-model-item label="方案编码" prop="code">
              <a-input placeholder="请输入方案编码" :disabled="disableSubmit || editType === 'edit'" v-model.trim="form.code"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="文件名称" prop="fileName">
              <a-input placeholder="请输入文件名称" :disabled="disableSubmit" v-model.trim="form.fileName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="接口" prop="api">
              <!-- <a-input placeholder="请输入接口" :disabled="disableSubmit" v-model.trim="form.api"/> -->
              <!-- <a-select
                show-search
                allowClear
                option-filter-prop="children"
                placeholder="请选择路径"
                v-model="form.api"
                :disabled="disableSubmit"
                @search="handleSearch"
                @popupScroll="handlePopupScroll"
                @select="handleSelect"
              >
                <a-select-option v-for="item in renderedOptions" :key="item.value" :hasCriteria="item.hasCriteria">
                  {{ item.label }}
                </a-select-option>
              </a-select> -->
              <ZSyncSelectTag v-model="form.api" :options="oriDataList" />
            </a-form-model-item>
          </a-col>

          <a-col :span="8" >
            <a-form-model-item>
              <span slot="label">
                组件标识
                <a-tooltip title="项目名:组件名:功能标识,例如: system:MenuList:export">
                  <a-icon type="question-circle-o" />
                </a-tooltip>
              </span>
              <a-input placeholder="请输入组件标识" :disabled="disableSubmit" v-model.trim="form.elementId"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="显示标题">
              <a-radio-group v-model="form.showTitle" button-style="solid">
                <a-radio-button :value="true">显示</a-radio-button>
                <a-radio-button :value="false">隐藏</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="标题">
              <a-input :disabled="disableSubmit" placeholder="请输入标题" v-model.trim="form.title"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="标题背景颜色" :prop="form.showTitle?'bgColor':''">
              <ZColorPicker :disabled="disableSubmit" v-model="form.bgColor" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="标题字体颜色" :prop="form.showTitle?'fontColor':''">
              <ZColorPicker :disabled="disableSubmit" v-model="form.fontColor" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="标题字体大小" :prop="form.showTitle?'fontSize':''">
              <a-input-number class="!w-full" :disabled="disableSubmit" placeholder="请输入标题字体大小" v-model="form.fontSize"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="列头背景颜色" prop="bgColor">
              <ZColorPicker :disabled="disableSubmit" v-model="form.columnBgColor" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="列头字体颜色" prop="columnFontColor">
              <ZColorPicker :disabled="disableSubmit" v-model="form.columnFontColor" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="列头字体大小" prop="columnFontSize">
              <a-input-number class="!w-full" :disabled="disableSubmit" placeholder="请输入列头字体大小" v-model="form.columnFontSize"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="列头字体对齐">
              <a-radio-group v-model="form.columnAlign" button-style="solid">
                <a-radio-button :value="0">左对齐</a-radio-button>
                <a-radio-button :value="1">居中</a-radio-button>
                <a-radio-button :value="2">右对齐</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>

          <a-col :span="8" >
            <a-form-model-item label="正文字体大小" prop="dataFontSize">
              <a-input-number class="!w-full" :disabled="disableSubmit" placeholder="请输入正文字体大小" v-model="form.dataFontSize"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="正文背景颜色" prop="dataBgColor">
              <ZColorPicker :disabled="disableSubmit" v-model="form.dataBgColor" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="正文字体颜色" prop="dataFontColor">
              <ZColorPicker :disabled="disableSubmit" v-model="form.dataFontColor" />
            </a-form-model-item>
          </a-col>

          <!-- <a-col :span="8" >
            <a-form-model-item label="是否显示页码">
              <a-radio-group v-model="form.showPageNo" button-style="solid">
                <a-radio-button :value="true">显示</a-radio-button>
                <a-radio-button :value="false">隐藏</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="8" >
            <a-form-model-item label="拦截器">
              <a-input placeholder="请输入拦截器" :disabled="disableSubmit" v-model.trim="form.interceptorName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="重复表头">
              <a-radio-group v-model="form.repeatHeader" button-style="solid">
                <a-radio-button :value="true">显示</a-radio-button>
                <a-radio-button :value="false">隐藏</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="显示边框">
              <a-radio-group v-model="form.showBorder" button-style="solid">
                <a-radio-button :value="true">显示</a-radio-button>
                <a-radio-button :value="false">隐藏</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>

         </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import ZColorPicker from '@/components/zz/ZColorPicker'
import { getAction } from '@/services/manage'
import debounce from 'lodash/debounce'
import { duplicateCheck } from '@/services/common'
import ZSyncSelectTag from '@/components/dict/ZSyncSelectTag'
const LOAD_NUM = 30 // 加载条数--可自定义
export default {
  name: 'ExcelExportTemplateModal',
  mixins: [ModalFormMixin],
  components: { ZColorPicker, ZSyncSelectTag },
  data() {
    return {
      validatorRules: {
        code: [
          { required: true, message: '请输入方案编码', trigger: 'change' },
          { validator: (rule, value, callback) => this.validateDuplicate(rule, value, callback), trigger: 'change' }
        ],
        fileName: [{ required: true, message: '请输入文件名称!' }],
        api: [{ required: true, message: '请输入接口' }],
        fontSize: [{ required: true, message: '请输入标题字体大小' }],
        dataFontSize: [{ required: true, message: '请输入正文字体大小' }],
        bgColor: [{ required: true, message: '请选择标题背景颜色' }],
        fontColor: [{ required: true, message: '请选择标题字体颜色' }],
        dataBgColor: [{ required: true, message: '请选择正文背景颜色' }],
        dataFontColor: [{ required: true, message: '请选择正文字体颜色' }]

      },
      url: {
        add: '/excel/export/solution/add',
        edit: '/excel/export/solution/edit',
        apiList: '/res/data/api/list'
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      dropdownvisible: false,
      // pathOptions: [],
      oriDataList: [] // 原数据列表 -- 从接口获取
      // dataLoading: false, // 原数据列表的加载状态 -- 接口的响应状态
      // searchVal: '', // 搜索的内容
      // filterDataList: [], // 过滤的数据列表 -- 从dataList中过滤出含搜索内容的数据
      // renderedOptions: []// 已渲染的下拉列表
    }
  },
  methods: {
    addAfter() {
      this.form = Object.assign({}, {
        dataBgColor: '#ffffff',
        dataFontColor: '#000000',
        bgColor: '#ffffff',
        fontColor: '#000000',
        fontSize: 16,
        dataFontSize: 11,
        showTitle: true,
        columnAlign: 1,
        // showPageNo: true,
        repeatHeader: false,
        showBorder: true
      })
      this.getPathData()
    },
    editAfter() {
      this.getPathData()
    },
    validateDuplicate: debounce(function(rule, value, callback) {
      if (!value || this.editType === 'edit') {
        callback()
      } else {
        duplicateCheck({
          tableName: 'mb_excel_export_solution',
          column: 'code_',
          key: value,
          exclude: this.editType === 'edit' ? value : undefined
        }).then(res => {
          if (res.success) {
            res.result === 0 ? callback() : callback('编码已存在')
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    }, 400),
    getPathData() {
      getAction(this.url.apiList, { onlyCriteria: true }).then(res => {
        if (res.success) {
          const paths = []
          res.result.forEach(item => {
            const path = `${item.httpUrls[0]}:${item.hasCriteria}`
            if (!paths.includes(path)) { // 去除重复接口
              paths.push(path)
              this.oriDataList.push({
                label: item.httpUrls[0],
                value: item.httpUrls[0],
                hasCriteria: item.hasCriteria
              })
            }
          })
          // this.renderedOptions = this.oriDataList.slice(0, LOAD_NUM)
        }
      })
    }
    // handleSearch(val) {
    //   this.searchVal = val
    //   let filterList = []
    //   if (val) {
    //     filterList = (this.oriDataList).filter(item => item.label.indexOf(val) > -1)
    //   } else {
    //     filterList = this.oriDataList
    //   }
    //   this.filterDataList = filterList
    //   this.renderedOptions = filterList.length < LOAD_NUM ? filterList : filterList.slice(0, LOAD_NUM)
    // },
    // handlePopupScroll: debounce(function(e) { // 滚动时触发（防止抖动）
    //   const { scrollHeight, scrollTop, clientHeight } = e.target
    //   if (scrollHeight - scrollTop === clientHeight) {
    //     if (this.searchVal === '') {
    //       this.loadMoreData(this.oriDataList)
    //     } else {
    //       this.loadMoreData(this.filterDataList)
    //     }
    //   }
    // }, 400),
    // // 加载更多数据到select框
    // loadMoreData(dataList) {
    //   const renderedLen = this.renderedOptions.length// 已渲染的下拉列表长度
    //   const totalLen = dataList.length // 当前数据源的长度
    //   let addList = []
    //   if (renderedLen < totalLen) {
    //     if (renderedLen + LOAD_NUM <= totalLen) {
    //       addList = dataList.slice(renderedLen, renderedLen + LOAD_NUM)
    //     } else {
    //       addList = dataList.slice(renderedLen,
    //         renderedLen + (totalLen % LOAD_NUM))
    //     }
    //     this.renderedOptions = (this.renderedOptions).concat(addList)
    //   }
    // }, // 被选中时调用，参数为选中项的value(或 key) 值
    // handleSelect(val) {
    //   if (this.searchVal) {
    //     const selectedArr = (this.oriDataList).filter(item => item === val)// 从数据源中过滤出下拉框选中的值，并返回一个数组
    //     const restList = (this.oriDataList).filter(item => item !== val)// 从数据源中过滤出其他的值，返回一个数组
    //     const newList = selectedArr.concat(restList).slice(0, LOAD_NUM)// 将选中的元素放到下拉列表的第一位
    //     this.renderedOptions = newList// 更新已渲染的下拉列表
    //     this.oriDataList = selectedArr.concat(restList)// 更新数据源
    //     this.searchVal = ''// 因为触发handleSelect函数时，会自动清空用户输入的内容。因此，searchVal需要重置。
    //   }
    // }
  }
}
</script>
<style scoped>

</style>
